<template>
	<view class="myorder">
		<view class="tabs">
			<view class="tabs-item" v-for="(item,index) in tabs" @click="change(index)">
				<text class="tabs-item_text" :class="{activeText:activeIndex===index}">{{item.title}}</text><br />
				<text v-if="activeIndex===index" class="tab-line"></text>
			</view>
		</view>
		<view class="tabs-content">
			<!-- 全部订单 -->
			<view v-if="activeIndex===0" class="tabs-container_all">
				全部订单
			</view>
			<!-- 待支付订单 -->
			<view v-else="activeIndex===1" class="tabs-container_waitPay">
				待支付订单
			</view>
			<!-- 待发/提货 -->
			<view v-else="activeIndex===2" class="tabs-container_waitSend">
				提货
			</view>
			<!-- 待收货 -->
			<view v-else="activeIndex===3" class="tabs-container_waitGoods">
				待收货
			</view>
			<!-- 待评价 -->
			<view v-else class="tabs-container_waitEvalated">
				待评价
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				tabs: [{
						title: '全部订单'
					}, {
						title: "待支付",
					}, {
						title: '待发/提货'
					},
					{
						title: "待收货"
					},
					{
						title: "待评价"
					}
				]
			}
		},
		methods: {
			change(index) {
				console.log(index)
				this.activeIndex = index
			}
		}
	}
</script>

<style>
	.myorder {}

	.tabs {
		height: 40px;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 15px;
	}

	.tabs-item {
		position: relative;
	}

	.tabs-item_text {
		margin-bottom: 5px;
	}

	.activeText {
		font-size: 18px;
	}

	.tab-line {
		width: 25px;
		height: 2px;
		background: red;
		margin: 0 auto;
		position: absolute;
		left: 0;
		right: 0;
		margin: 5px auto;
	}
</style>
